
<template>
<!-- 弃案 -->
  <div class='Device'>
              <div class="pieContent">
            <div class="pieContent-pie">

              <div class="pieContent-pie__chart">
                <chart-view
                  :chart-option="smartRingPie"
                  :auto-resize="true"
                  height="100%"
                />
              </div>

              <p class="pieContent-pie__name">智能环</p>

              <div class="pieContent-pie__data">
                <b class="pieContent-pie__data__sum"
                  >{{ smartRing.dataCost[0].value }}/</b
                >
                <b class="pieContent-pie__data__normal"
                  >{{ smartRing.dataCost[1].value }}/</b
                >
                <b class="pieContent-pie__data__abnormal"
                  >{{ smartRing.dataCost[2].value }}/</b
                >
                <b class="pieContent-pie__data__alarm">{{
                  solarPanels.dataCost[3].value
                }}</b>
              </div>
            </div>

            <div class="pieContent-pie">
              <div class="pieContent-pie__chart">
                <chart-view
                  :chart-option="cameraPie"
                  :auto-resize="true"
                  height="100%"
                />
              </div>
              <p class="pieContent-pie__name">摄像头</p>
              <div class="pieContent-pie__data">
                <b class="pieContent-pie__data__sum"
                  >{{ camera.dataCost[0].value }}/</b
                >
                <b class="pieContent-pie__data__normal"
                  >{{ camera.dataCost[1].value }}/</b
                >
                <b class="pieContent-pie__data__abnormal"
                  >{{ camera.dataCost[2].value }}/</b
                >
                <b class="pieContent-pie__data__alarm">{{
                  solarPanels.dataCost[3].value
                }}</b>
              </div>
            </div>

            <div class="pieContent-pie">
              <div class="pieContent-pie__chart">
                <chart-view
                  :chart-option="solarPanelsPie"
                  :auto-resize="true"
                  height="100%"
                />
              </div>
              <p class="pieContent-pie__name">太阳能板</p>
              <div class="pieContent-pie__data">
                <b class="pieContent-pie__data__sum"
                  >{{ solarPanels.dataCost[0].value }}/</b
                >
                <b class="pieContent-pie__data__normal"
                  >{{ solarPanels.dataCost[1].value }}/</b
                >
                <b class="pieContent-pie__data__abnormal"
                  >{{ solarPanels.dataCost[2].value }}/</b
                >
                <b class="pieContent-pie__data__alarm">{{
                  solarPanels.dataCost[3].value
                }}</b>
              </div>
            </div>
            <!-- <ul class="pieDataPanel">
              <li class="pieDataPanel__data">
                <i></i>
                <p>设备总数</p>
              </li>
              <li class="pieDataPanel__data">
                <i></i>
                <p>正常设备</p>
              </li>
              <li class="pieDataPanel__data">
                <i></i>
                <p>异常设备</p>
              </li>
            </ul> -->
          </div>
  </div>
</template>
<script>

export default {
  name:'Device',
  data() {
    return {

    };
  },
  /**所有方法*/
  methods: {

  },
}
</script>
<style scoped lang='scss'>
 /* @import url(); 引入css类 */
.pieContent-pie {
  margin-top: 5%;
  width: 33%;
  height: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  &__chart {
    height: 60%;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  &__name {
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 19px;
  }

  &__data {
    font-size: 14px;
    font-weight: 100;
    line-height: 19px;

    &__sum {
      color: #66D4D0;
    }

    &__normal {
      color: #47b3d9;
    }

    &__abnormal {
      color: #d88014;
    }
    &__alarm {
      color: #D4491E;
    }
  }
}

.pieDataPanel {
  width: 25%;
  height: 80%;
  margin-top: 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 5px;
  background: #101b2a;
  &__data {
    height: 20%;
    display: flex;
    align-items: center;

    i {
      display: block;
      width: 0.7vw;
      height: 0.7vw;
    }

    p {
      padding-left: 0.5vw;
      font-size: 12px;
      font-weight: 500;
      color: #78879B;
      line-height: 11px;
    }


  }
}

.pieDataPanel .pieDataPanel__data:first-child i{
  background: #faffff;
}
.pieDataPanel .pieDataPanel__data:nth-child(2) i{
  background: #44b5dc;
}
.pieDataPanel .pieDataPanel__data:nth-child(3) i{
  background: #d68016;
}

</style>
